<template >
  <div class="hold-transition">
    <!-- <img src="/img/bg.png" class="bg" /> -->
    <div id="app" class="bg">
      <!-- 导航栏 -->

      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="rgba(251, 255, 0, 0.68)"
        router
      >
        <el-menu-item index="/loginpage/loginemail" id="loginBut"
          >登录</el-menu-item
        >
        <el-menu-item id="regist" index="./loginpage/register"
          >注册账号</el-menu-item
        >
        <el-menu-item @click="logout" id="logOut">退出登录</el-menu-item>
        <el-submenu index="2" id="userCho">
          <template slot="title">用户选项</template>
          <el-menu-item index="../userInfo">用户个人信息修改</el-menu-item>
          <el-menu-item index="./userOrder">用户订单查询</el-menu-item>
        </el-submenu>
        <el-menu-item @click="gotoSeckill" id="seckill">秒杀活动</el-menu-item>
        <el-menu-item index="./adminpage/index" id="isAdmin"
          >登录后台</el-menu-item
        >
      </el-menu>

      <!-- 导航栏结束 -->

      <div class="content-header">
        <h1>淘淘网，淘出你的喜爱！</h1>
      </div>

      <div class="app-container">
        <div class="box">
          <!--查询组件-->
          <div class="filter-container">
            <el-input
              placeholder="商品名称"
              v-model="pagination.goodsName"
              style="width: 200px"
              class="filter-item"
            ></el-input>

            <el-button @click="getAll()" class="dalfBut" type="primary"
              >查询</el-button
            >
          </div>

          <el-table
            size="small"
            current-row-key="id"
            :data="dataList"
            highlight-current-row
            class="abc"
          >
            <el-table-column
              label="商品封面"
              align="center"
              width="175"
              height="70"
            >
              　　<template slot-scope="scope">
                <img :src="scope.row.goodsPic" class="head_pic" />
                　　</template
              >
            </el-table-column>

            <el-table-column
              prop="goodsName"
              label="商品名称"
              align="center"
            ></el-table-column>

            <el-table-column
              prop="goodsDisc"
              label="描述"
              align="center"
            ></el-table-column>

            <el-table-column
              prop="goodsStock"
              label="商品数量"
              align="center"
            ></el-table-column>

            <el-table-column
              prop="goodsPrice"
              label="商品单价"
              align="center"
            ></el-table-column>

            <el-table-column label="选择地址和商品数量" align="center">
            
                <el-button
                  type="primary"
                  @click="
                  dialogFormVisible=true;
                  chooseCount()
                  "
                  size="mini"
                  >选择地址和商品数量</el-button
                >
              
            </el-table-column>

            <el-table-column label="下单" align="center">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  @click="
                    createOrder(scope.row);
                  "
                  size="mini"
                  >下单</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!--分页组件-->
          <div class="pagination-container">
            <el-pagination
              class="pagiantion"
              @current-change="handleCurrentChange"
              :current-page="pagination.currentPage"
              :page-size="pagination.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="pagination.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- Form -->
    <el-dialog title="购买数量和收货地址添加" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="收货地址">
          <el-input v-model="goodsAddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="购买数量" label-width="80">
          <el-input v-model="goodsCount" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          id="queding"
          type="primary"
          @click="dialogFormVisible = false;"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

 

<script>
import jwt_decode from "jwt-decode";
import router from "../router";
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      
      goodsAddress: "",
      goodsCount: "",
      formLabelWidth: "120px",
      activeIndex: "1",
      activeIndex2: "1",
      goodsImg: "",
      goodsList: [],
      issend:"false",
      totalgoodsPrice: 0, //商品总价
      dataList: [], //当前页要展示的列表数据
      dialogFormVisible: false, //添加表单是否可见
      dialogFormVisible4Edit: false, //编辑表单是否可见
      postDialogFormVisible: false,
      formData: {}, //表单数据
      postData: [], //post数据
      rules: {
        //校验规则
        type: [
          { required: true, message: "商品类别为必填项", trigger: "blur" },
        ],
        goodsName: [
          { required: true, message: "商品名称为必填项", trigger: "blur" },
        ],
      },
      pagination: {
        //分页相关模型数据
        currentPage: 1, //当前页码
        pageSize: 3, //每页显示的记录数
        total: 0, //总记录数
        type: "",
        goodsName: "",
        goodsDisc: "",
        name: "",
        description: "",
      },
    };
  },

  //钩子函数，VUE对象初始化完成后自动执行
  created() {
    this.getAll();
  },
  mounted() {
    this.isLogin();
  },

  methods: {

      //获取用户昵称和地址
      getNickAndAddress() {
      this.$axios
        .get("/user", {
          headers: {
            "x-access-token": localStorage.getItem("x-access-token"),
          },
        })
        .then((res) => {
          this.goodsAddress =  res.data.extend.address;
           
        });
    },
    //判断用户是否登录
    isLogin() {
      var token = window.localStorage.getItem("x-access-token");

      if (null == token) {
        var logOut = document.getElementById("logOut");
        var userCho = document.getElementById("userCho");
        var seckill = document.getElementById("seckill");
        var isAdmin1 = document.getElementById("isAdmin");
        isAdmin1.remove();
        seckill.remove();
        logOut.remove();
        userCho.remove();
        return;
      }

      const decode = jwt_decode(token);
      var regi = document.getElementById("regist");
      regi.remove();

      if (decode.userRole == "user") {
        var isAdmin1 = document.getElementById("isAdmin");

        isAdmin1.remove();
      }
      if (decode.userRole == "admin") {
        var isAdmin1 = document.getElementById("isAdmin");

        // var logOut = document.getElementById("logOut");
        var userCho = document.getElementById("userCho");
        var seckill = document.getElementById("seckill");
        // var isAdmin1 = document.getElementById("isAdmin");
        // isAdmin1.remove();
        seckill.remove();
        // logOut.remove();
        userCho.remove();
      }

      if (token != null) {
        var logBut = document.getElementById("loginBut");
        logBut.remove();
      } else if (token == null) {
        var logOut = document.getElementById("logOut");
        var userCho = document.getElementById("userCho");
        var seckill = document.getElementById("seckill");
        seckill.remove();
        logOut.remove();
        userCho.remove();
      }
    },

    //退出登录
    logout() {
      var storage = window.localStorage;
      storage.clear();
      this.$message({
        message: "用户已退出",
        type: "success",
      });
      this.$router.go(0);
    },
    //登录秒杀页面
    gotoSeckill() {
      this.$axios
        .get("/seckill/gotoSeckillPage", {
          headers: {
            "x-access-token": localStorage.getItem("x-access-token"),
          },
        })
        .then((res) => {
          if (res.data.code == 200 && res.data.extend.result == "登陆成功") {
            router.push("./seckillpage/index");
          } else if (
            res.data.code == 401 &&
            res.data.extend.result == "用户不存在！"
          ) {
            this.$message.error("请先登录账号，才能参与秒杀活动");
          } else if (
            res.data.code == 401 &&
            res.data.extend.result == "token已过期，请重新登录"
          ) {
            this.$message.error("您已经很久没登录了，请重新登录");
          }
        });
    },
    //列表
    //分页查询
    getAll() {
      //组织参数，拼接url请求地址
      // console.log(this.pagination.type);
      // let param = "?type=" + this.pagination.type;
      let param = "?goodsName=" + this.pagination.goodsName;
      param += "&goodsDisc=" + this.pagination.goodsDisc;
      // console.log(param);

      //发送异步请求
      this.request
        .get(
          "/goods/" +
            this.pagination.currentPage +
            "/" +
            this.pagination.pageSize +
            param
        )
        .then((res) => {
          this.pagination.pageSize = res.data.size;
          this.pagination.currentPage = res.data.current;
          this.pagination.total = res.data.total;
          this.dataList = res.data.records;
        });
    },

    //选择商品数量和下单地址
    chooseCount(){
      this.getNickAndAddress()
      this.goodsCount="";
    },




    //创建订单
    createOrder(row) {
      var goodsName = row.goodsName;
      var goodsPrice = row.goodsPrice;
      this.getNickAndAddress();
      console.log(this.goodsAddress)
        if(this.goodsAddress==""||this.goodsCount==""){
          this.$message.error(" 请选择收货地址和下单数量");
          return;
        }
        if(this.goodsAddress=="默认地址"&&this.goodsCount==""){
         
        }
        this.$axios
        .get(
          "/orders/" +
            goodsName +
            "/" +
            goodsPrice +
            "/" +
            this.goodsAddress +
            "/" +
            this.goodsCount,
          {
            headers: {
              "x-access-token": localStorage.getItem("x-access-token"),
            },
          }
        )
        .then((resp) => {
      
          if (resp.code == 401 && "用户不存在！" == resp.data.extend.result) {
            this.$message.error("请先登录再购买商品");
          } else if ("订单创建失败,该商品为秒杀商品" == resp.data.extend.result) {
            this.$message.error("该商品是秒杀商品，购买请参加秒杀活动");
          }  else if ("订单创建失败，该商品库存不足" == resp.data.extend.result) {
            this.$message.error(" 订单创建失败，该商品库存不足,请重试");
          } 
         
          else if (resp.data.extend.result=="订单创建成功"){
            this.$message({
        message: "下单成功！三秒后前往订单页面查看",
        type: "success",
      });
          //去到订单页面
          this.countDown();
          } 
      
          // 下面是点击取消的操作
        });
       
     
    },

  

    setissend() {
     
     this.issend=true;
    },

   
    //切换页码
    handleCurrentChange(currentPage) {
      var that = this;
      //修改页码值为当前选中的页码值
      that.pagination.currentPage = currentPage;
      //执行查询
      that.getAll();
    },

      //倒计时三秒跳转到订单页面
      countDown() {
      const TIME_COUNT = 3;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 1 && this.count <= TIME_COUNT) {
            //限制倒计时区间
            this.count--;
          } else {
            clearInterval(this.timer); //删除定时器
            this.timer = null;
            //跳转的页面写在此处
            router.push("./userOrder");
          }
        }, 1000);
      }
    },
  },
};
</script>


<style>
ul,
li {
  list-style: none;
}
li {
  float: left;
}
input {
  text-align: center;
}
.head_pic {
  width: 9.375rem;
}
.xxxx {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: nowrap;
}

.title {
  margin-left: 0px;
  height: px;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #dcdcdc;
  display: flex;
  justify-content: space-between;
}

span {
  font-size: 16px;
}
a {
  width: 70px;
  height: 48px;
  color: black;
  margin: 0px 10px;
  text-decoration: none;
  line-height: 48px;
  text-align: center;
}
a:hover {
  background-color: #bebebe;
}
.serch {
  height: 32px;
  width: 500px;
  background-color: #fff;
  margin: auto;
  display: flex;
}
.inputType {
  width: 400px;
  height: 30px;
  text-indent: 1em;
  line-height: 34px;
  background-color: #fff;
  border: 1px solid black;
  border-top-left-radius: 17px;
  border-bottom-left-radius: 17px;
  font-size: 12px;
}
.inputType:focus {
  outline: none;
  border: 1px solid rgb(230, 32, 213);
}
.button {
  color: #fff;
  text-align: center;
  background: rgba(204, 51, 0, 1);
  border-left: 1px solid rgba(0, 0, 0, 0.45);
  width: 100px;
  height: 32px;
  line-height: 34px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}
.el-menu-demo {
  top: 0px;
  position: absolute;
  width: 100%;
}
.bg {
  background: url("../assets/img/bg.png") no-repeat;
  background-size: cover;
  /* background-color: aqua; */
  height: 100vh;
}

.el-table__rowcurrent-rowel-table__row--striped {
  background: url("../assets/img/bg.png") no-repeat;
  background-size: cover;
  /* background-color: aqua; */
}
.abc {
  background: url("../assets/img/bg.png") no-repeat;
  background-size: cover;
  /* background-color: aqua; */
}
tbody {
  background: url("../assets/img/bg.png");
  background-size: cover;
  /* background-color: aqua; */
}
</style>
